﻿$border-sides: ("top", "right", "bottom", "left");
$border-sizes: (1, 2, 3, 4, 5);

@each $size in $border-sizes {
    .border-#{$size} {
        border: #{$size}px solid $border-color !important;

        @each $color-name, $color-value in $theme-colors {
            &.border-#{$color-name} {
                border-color: $color-value !important;
            }
        }
    }

    @each $color-name, $color-value in $theme-colors {
        .border-#{$color-name}-#{$size} {
            border: #{$size}px solid $color-value !important;
        }
    }

    @each $side in $border-sides {
        .border-#{$side}-#{$size} {
            border-#{$side}: #{$size}px solid $border-color !important;
        }

        @each $color-name, $color-value in $theme-colors {
            .border-#{$color-name}-#{$side}-#{$size} {
                border-#{$side}: #{$size}px solid $color-value !important;
            }
        }
    }
}
